<template>
  <div class="custom-table-wrapper" v-html="mapStore.trajectoryDetailsTable" v-loading="mapStore.loading"
    element-loading-text="加载中..." @click="handleClick"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getVehicleList } from "@/api/vehicle";
import { getAjaxVehicleTableData } from "@/api/getAjaxData.js"
import { formatTimestamp } from "@/tools/utils.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

function handleClick(event) {
  const target = event.target;

  const obj = JSON.parse(
    target.getAttribute("data").replace(/\n/g, "").replace(/%/g, '"')
  );

  if (obj.hasOwnProperty("vehicleNumber") && !obj.hasOwnProperty("lon")) {
    let startDateTime, endDateTime;
    if (mapStore.dateTimeRange.length === 0) {
      startDateTime = formatTimestamp(new Date().getTime() - 30 * 86400000);
      endDateTime = formatTimestamp(new Date().getTime());
    } else {
      startDateTime = mapStore.dateTimeRange[0];
      endDateTime = mapStore.dateTimeRange[1];
    }

    const queryInfo = {
      vehicleNumberList: [obj.vehicleNumber],
      startDateTime,
      endDateTime,
    };
    getVehicleList(queryInfo)
      .then((res) => {
        mapStore.pointVisible = false;
        mapStore.allPointsVisible = false;
        mapStore.polylineVisible = true;
        mapStore.polylineData = res["vehicleTrack"][0];
        mapStore.polylineKey = new Date().toString();
      });
  } else {
    if (obj.lat && obj.lon) {
      mapStore.polylineVisible = false;
      mapStore.allPointsVisible = false;
      mapStore.pointVisible = true;
      mapStore.pointData = obj;
      mapStore.pointKey = new Date().toString();
    } else {
      ElMessageBox.confirm(
        "当前位置经纬度没有记录，无法在地图上定位。",
        "错误提示",
        {
          confirmButtonText: "确定",
          type: "warning",
        }
      )
        .then(() => { })
        .catch(() => { });
    }
  }
}

onMounted(() => {
  setTimeout(() => {
    getAjaxVehicleTableData({});
  }, 1 * 1000);
});
</script>

<style scoped>
@import "@/assets/main.css";

.custom-table-wrapper {
  height: calc(100vh - 428px) !important;
  overflow: auto;
}

.custom-table-wrapper /deep/ .custom-table th {
  background: rgba(15, 48, 121);
  color: rgba(189, 189, 190);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  padding: 8px;
  border-bottom: rgba(14, 95, 255, 0.25);
}

.custom-table-wrapper /deep/ .custom-table td {
  border: 1px solid rgba(14, 95, 255, 0.25);
  padding: 5px 10px;
  color: rgba(189, 189, 190);
  word-break: break-all;
  word-wrap: break-word !important;
  overflow-wrap: break-word;
  font-size: 14px;
}

.custom-table-wrapper /deep/ tr:nth-child(odd) {
  background-color: rgba(14, 95, 255, 0.05);
}

.custom-table-wrapper /deep/ tr:nth-child(even) {
  background-color: rgba(14, 95, 255, 0.15);
}

.custom-table-wrapper /deep/ tr:hover {
  background-color: rgba(14, 95, 255, 0.25);
  cursor: pointer;
}

.custom-table-wrapper /deep/ .custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table-wrapper /deep/ .custom-table thead {
  position: -webkit-sticky;
  /* Safari 支持 */
  position: sticky;
  top: 0;
  /* 距离顶部的位置 */
  /* background-color: rgba(14, 95, 255, 0.3);  */
  z-index: 1;
  /* 确保表头在其他元素之上 */
}
</style>
